<template>
  <div id="recharge">
    <Vheader title="充值中心"></Vheader>
    <div class="v-wrapper" ref="wrapper">
      <div class="v-container">
        <div class="recharge-box">
          <div class="recharge-title"><span><i class="iconfont icon-mobile"></i></span><span>话费充值</span></div>
          <input type="text" placeholder="请输入充值号码">
          <div class="recharge-content">
            <span class="recharge-banner" v-for="item in recharges" :class="{'active':item.active}" @click="recharge(item)">
              <span>{{item.fee}}元</span>
              <span>售价10元</span>
            </span>
          </div>
          <div class="recharge-btn-wrapper">
            <div class="recharge-btn">立即充值</div>
          </div>
        </div>
        <div class="recharge-box">
          <div class="recharge-title"><span><i class="iconfont icon-mobile"></i></span><span>流量充值</span></div>
          <input type="text" placeholder="请输入充值号码">
          <div class="recharge-content">
            <span class="recharge-banner" v-for="item in flows" :class="{'active':item.active}"
                  @click="flow(item)">
              <span>{{item.number | flow}}</span>
              <span>售价10元</span>
            </span>
          </div>
          <div class="recharge-btn-wrapper">
            <div class="recharge-btn">立即充值</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vheader from '../../components/header'
  import BScroll from 'better-scroll'
  import Vue from 'vue'

  export default {
    data() {
      return {
        active: false,
        recharges: [
          {fee: 10, active: true},
          {fee: 20},
          {fee: 30},
          {fee: 40},
          {fee: 50},
          {fee: 60},
          {fee: 70},
          {fee: 80},
        ],
        flows: [
          {
            number: 30,
            active: true
          },
          {
            number: 50
          },
          {
            number: 100
          },
          {
            number: 300
          },
          {
            number: 500
          },
          {
            number: 1024
          },
          {
            number: 2048
          },
          {
            number: 3072
          },
          {
            number: 6144
          },
        ]
      }
    },
    created() {
      this.$nextTick(() => {
        this._initScroll();
      })
    },
    methods: {
      recharge: function (item) {
        this.$nextTick(() => {
          console.log('111111111');
          this.recharges.forEach(function (item) {
            Vue.set(item, 'active', false)
          });
          Vue.set(item, 'active', true)
        })
      },
      flow:function (item) {
        this.$nextTick(() => {
          console.log('111111111');
          this.flows.forEach(function (item) {
            Vue.set(item, 'active', false)
          });
          Vue.set(item, 'active', true)
        })
      },
      _initScroll: function () {
        this.scroll = new BScroll(this.$refs.wrapper, {click: true});
      }
    },
    filters: {
      flow: function (value) {
        if (value >= 1024) {
          return (value / 1024) + 'G'
        }else{
          return value+'M'
        }
      }
    },
    components: {
      Vheader
    }
  }
</script>

<style type="text/scss" lang="scss">
  @import "../../common/style/public";

  .recharge-box {
    width: 100%;
    margin-bottom: 5px;
    .recharge-title {
      width: 100%;
      height: 45px;
      line-height: 45px;
      padding: 0 10px;
      background-color: #FFFFFF;
      margin-top: 5px;
      font-size: 14px;
      box-sizing: border-box;
      text-align: center;
      span {
        display: inline-block;
      }
      span:first-child {
        width: 25px;
        height: 25px;
        text-align: center;
        line-height: 25px;
        border-radius: 100%;
        background: linear-gradient(to right, #f18225, #e54505);
        i {
          color: #FFFFFF;
        }
      }
      span:last-child {
        font-size: 16px;
        padding-left: 10px;
      }
    }
    input {
      width: 100%;
      height: 45px;
      line-height: 45px;
      padding: 0 10px;
      margin-top: 1px;
      margin-bottom: 1px;
      background-color: #FFFFFF;
      box-sizing: border-box;
    }
    .recharge-content {
      width: 100%;
      padding: 10px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      background-color: #FFFFFF;
      /*margin-bottom: 5px;*/
      box-sizing: border-box;
      .recharge-banner {
        display: block;
        width: calc((100% - 20px) / 3);
        height: 50px;
        text-align: center;
        padding: 4px 0;
        border: solid 1px #ffa5a5;
        margin-bottom: 10px;
        border-radius: 5px;
        box-sizing: border-box;
        span {
          display: block;
          /*padding-top: 5px;*/
        }
        span:first-child {
          color: #000000;
          font-size: 15px;
          font-weight: 400;
        }
        span:last-child {
          font-size: 10px;
          color: #888888;
        }
      }
      .recharge-banner.active {
        background-color: #fff0f0;
        span:first-child {
          color: #f04a31;
        }
        span:last-child {
          color: #f04a31;
        }
      }
      .recharge-banner:not(:nth-child(3n)) {
        margin-right: 10px;
      }

    }
    .recharge-btn-wrapper {
      width: 100%;
      background-color: #FFFFFF;
      padding: 20px 0;
      .recharge-btn {
        width: 50%;
        height: 30px;
        margin: auto;
        line-height: 30px;
        text-align: center;
        border-radius: 20px;
        color: #f1563f;
        border: solid 1px #f1563f;
        font-size: 15px;
      }
    }

  }
</style>
